<<<<<<< HEAD
/* * @Author: Zhengxuan Ye * @Date: 2025-05-06 21:27:50 * @Last Modified by: Zhengxuan Ye * @Last
Modified time: 2025-05-06 21:27:50 */
=======
/*
 * @Author: Zhengxuan Ye
 * @Date: 2025-05-06 21:27:50
 * @Last Modified by:   Zhengxuan Ye
 * @Last Modified time: 2025-05-06 21:27:50
 */
>>>>>>> ba93636 (前端建设完成)

<template>
  <div class="about">
    <div class="container">
      <div class="page-header">
        <h1>关于我们</h1>
        <p>致力于中国非物质文化遗产的保护、传承与推广</p>
      </div>

      <div class="about-content">
        <section class="about-section">
          <h2>网站简介</h2>
          <div class="section-content">
            <p>
              中国非物质文化遗产网是一个专注于中国非物质文化遗产保护与传承的在线平台，旨在通过互联网技术，让更多人了解、关注和参与到非物质文化遗产的保护工作中来。
            </p>
            <p>
              我们收集整理了全国范围内的非物质文化遗产资源，包括国家级、省级非遗项目信息，以及入选联合国教科文组织非物质文化遗产名录的中国项目。通过图文并茂的方式，向广大用户展示中国丰富多彩的非遗文化。
            </p>
          </div>
        </section>

        <section class="about-section">
          <h2>我们的使命</h2>
          <div class="section-content">
            <div class="mission-list">
              <div class="mission-item">
                <div class="mission-icon">🔍</div>
                <div class="mission-text">
                  <h3>记录与调研</h3>
                  <p>
                    通过田野调查、文献研究等方式，全面、系统地记录非物质文化遗产资源，为其数字化保存奠定基础。
                  </p>
                </div>
              </div>

              <div class="mission-item">
                <div class="mission-icon">🎓</div>
                <div class="mission-text">
                  <h3>教育与传播</h3>
                  <p>
                    利用互联网平台的广泛影响力，向社会各界特别是青少年普及非遗知识，提高全民对传统文化的认知与热爱。
                  </p>
                </div>
              </div>

              <div class="mission-item">
                <div class="mission-icon">🤝</div>
                <div class="mission-text">
                  <h3>保护与传承</h3>
                  <p>
                    搭建非遗传承人与公众的沟通桥梁，促进非遗技艺的传承与发展，为非遗保护贡献力量。
                  </p>
                </div>
              </div>

              <div class="mission-item">
                <div class="mission-icon">🌏</div>
                <div class="mission-text">
                  <h3>交流与创新</h3>
                  <p>
                    推动中国优秀传统文化的国际交流，促进非遗与现代生活的融合，实现创造性转化与创新性发展。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="about-section">
          <h2>我们的团队</h2>
          <div class="section-content">
            <p>
              我们的团队由文化遗产保护专家、民俗学研究者、数字技术专家和文化传播工作者组成，具有丰富的非物质文化遗产保护工作经验和专业知识。
            </p>
            <div class="team-grid">
              <div v-for="member in teamMembers" :key="member.id" class="team-member">
                <div class="member-avatar">
                  <img :src="member.avatar" :alt="member.name" class="avatar-image" />
                  <div class="avatar-source">素材来源于chiikawa</div>
                </div>
                <h3>{{ member.name }}</h3>
                <p class="member-title">{{ member.title }}</p>
                <p class="member-desc">{{ member.description }}</p>
              </div>
            </div>
          </div>
        </section>

        <section class="about-section">
          <h2>联系我们</h2>
          <div class="section-content">
            <div class="contact-info">
              <div class="contact-item">
                <div class="contact-icon">✉️</div>
                <div class="contact-text">
                  <h3>电子邮箱</h3>
                  <p>khalilYip@yzx.com</p>
                </div>
              </div>

              <div class="contact-item">
                <div class="contact-icon">📞</div>
                <div class="contact-text">
                  <h3>联系电话</h3>
                  <p>+86-13640603902</p>
                </div>
              </div>

              <div class="contact-item">
                <div class="contact-icon">📍</div>
                <div class="contact-text">
                  <h3>办公地址</h3>
                  <p>jialidun-university</p>
                </div>
              </div>

              <div class="contact-item">
                <div class="contact-icon">⏱️</div>
                <div class="contact-text">
                  <h3>工作时间</h3>
                  <p>周一至周五 9:00-18:00</p>
                </div>
              </div>
            </div>

            <div class="contact-message">
              <h3>留言反馈</h3>
              <form class="contact-form" @submit.prevent="submitFeedback">
                <div class="form-group">
                  <label for="name">您的姓名</label>
                  <input
                    type="text"
                    id="name"
                    v-model="feedbackForm.name"
                    placeholder="请输入您的姓名"
                  />
                </div>
                <div class="form-group">
                  <label for="email">电子邮箱</label>
                  <input
                    type="email"
                    id="email"
                    v-model="feedbackForm.email"
                    placeholder="请输入您的电子邮箱"
                  />
                </div>
                <div class="form-group">
                  <label for="message">留言内容</label>
                  <textarea
                    id="message"
                    rows="5"
                    v-model="feedbackForm.message"
                    placeholder="请输入您的留言内容"
                  ></textarea>
                </div>
                <button type="submit" class="btn-submit" :disabled="feedbackLoading">
                  {{ feedbackLoading ? '提交中...' : '提交留言' }}
                </button>
              </form>
            </div>
          </div>
        </section>

        <!-- 社交互动部分 -->
        <section class="about-section interaction-section">
          <h2>互动交流</h2>
          <div class="section-content">
            <div class="social-interaction">
              <div class="interaction-header">
                <div class="interaction-intro">
                  <p>
                    我们重视您的反馈和参与！通过点赞、分享和评论，与我们一起探讨非物质文化遗产的魅力。
                  </p>
                  <p v-if="!isLoggedIn" class="login-tip">
                    <router-link to="/login" class="login-link">登录</router-link
                    >后可参与点赞、评论和分享
                  </p>
                </div>
                <div class="interaction-stats">
                  <div class="stat-item">
                    <div class="stat-icon">👁️</div>
                    <div class="stat-info">
                      <span class="stat-count">{{ Math.floor(Math.random() * 1000) + 500 }}</span>
                      <span class="stat-label">浏览</span>
                    </div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-icon">👍</div>
                    <div class="stat-info">
                      <span class="stat-count">{{ likeStatus.count }}</span>
                      <span class="stat-label">点赞</span>
                    </div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-icon">💬</div>
                    <div class="stat-info">
                      <span class="stat-count">{{ comments.length }}</span>
                      <span class="stat-label">评论</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="interaction-buttons">
                <button
                  @click="handleLike"
                  :class="['interaction-btn', 'like-btn', { active: likeStatus.liked }]"
                  :disabled="!isLoggedIn"
                >
                  <span class="icon">{{ likeStatus.liked ? '❤️' : '👍' }}</span>
                  <span class="label">{{ likeStatus.liked ? '已点赞' : '点赞' }}</span>
                  <span class="count">{{ likeStatus.count }}</span>
                </button>

                <button
                  @click="handleShare"
                  class="interaction-btn share-btn"
                  :disabled="!isLoggedIn"
                >
                  <span class="icon">🔗</span>
                  <span class="label">分享</span>
                  <span class="count">{{ sharesCount }}</span>
                </button>
              </div>

              <!-- 评论区域 -->
              <div class="comments-section">
                <h3>
                  评论区 <span class="comment-count">{{ comments.length }}</span>
                </h3>

                <!-- 评论输入框 -->
                <div class="comment-form">
                  <div class="comment-avatar" v-if="isLoggedIn">
                    <div class="avatar-placeholder">
                      {{ userStore.user?.username?.charAt(0) || '游' }}
                    </div>
                  </div>
                  <div class="comment-input-wrapper">
                    <textarea
                      v-model="commentContent"
                      :placeholder="isLoggedIn ? '写下您的评论...' : '请登录后评论...'"
                      rows="3"
                      :disabled="!isLoggedIn || commentLoading"
                    ></textarea>
                    <button
                      @click="submitComment"
                      class="submit-comment-btn"
                      :disabled="!isLoggedIn || !commentContent.trim() || commentLoading"
                    >
                      {{ commentLoading ? '提交中...' : '提交评论' }}
                    </button>
                  </div>
                </div>

                <!-- 评论列表 -->
                <div class="comments-list" v-if="comments.length > 0">
                  <div class="comment-items">
                    <div v-for="comment in comments" :key="comment.id" class="comment-item">
                      <div class="comment-avatar">
                        <div class="avatar-placeholder">{{ comment.username.charAt(0) }}</div>
                      </div>
                      <div class="comment-content">
                        <div class="comment-header">
                          <strong class="comment-author">{{ comment.username }}</strong>
                          <span class="comment-time">{{ formatDate(comment.created_at) }}</span>
                        </div>
                        <div class="comment-body">
                          {{ comment.content }}
                        </div>
                        <div class="comment-actions">
                          <button class="action-btn" :disabled="!isLoggedIn">
                            <span class="action-icon">👍</span>
                            <span class="action-count">{{ Math.floor(Math.random() * 10) }}</span>
                          </button>
                          <button class="action-btn reply-btn" :disabled="!isLoggedIn">
                            <span class="action-icon">💬</span>
                            <span class="action-label">回复</span>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="no-comments">
                  <div class="no-comments-icon">💬</div>
                  <p>暂无评论，快来发表您的看法吧！</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { useInteractionStore } from '../stores/interaction'
import profile1 from '../assets/profile/pic1.jpg' // 王文华
import profile2 from '../assets/profile/pic2.jpg' // 李静
import profile3 from '../assets/profile/pic3.jpg' // 张明
import profile4 from '../assets/profile/pic4.jpg' // 刘佳

export default {
  name: 'AboutView',
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    const interactionStore = useInteractionStore()

    // 页面ID - 关于我们页面
    const pageId = 1001

    // 用户状态
    const isLoggedIn = computed(() => userStore.isLoggedIn)
    const token = computed(() => userStore.token)

    // 表单数据
    const feedbackForm = ref({
      name: '',
      email: '',
      message: '',
    })
    const feedbackLoading = ref(false)

    // 社交互动数据
    const comments = ref([])
    const likeStatus = ref({ liked: false, count: 0 })
    const sharesCount = ref(0)
    const commentContent = ref('')
    const commentLoading = ref(false)

    // 团队成员数据
    const teamMembers = [
      {
        id: 1,
        name: '耶正萱',
        title: '创始人 / 非遗专家',
        description: '文化部非物质文化遗产保护专家委员会委员，从事非遗保护工作20余年',
        avatar: profile1,
      },
      {
        id: 2,
        name: '李静',
        title: '内容总监',
        description: '民俗学博士，曾参与多项国家级非遗项目的调研与记录工作',
        avatar: profile2,
      },
      {
        id: 3,
        name: '张明',
        title: '技术负责人',
        description: '资深互联网从业者，专注于文化遗产数字化保护技术研发',
        avatar: profile3,
      },
      {
        id: 4,
        name: '刘佳',
        title: '传播总监',
        description: '文化传播学硕士，致力于传统文化的创新传播与推广',
        avatar: profile4,
      },
    ]

    // 格式化日期
    const formatDate = (dateString) => {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
      })
    }

    // 加载评论
    const loadComments = async () => {
      try {
        console.log(`加载评论，页面ID: ${pageId}`)
        const result = await interactionStore.getComments(pageId)
        console.log('获取到的评论:', result)
        comments.value = result || []
      } catch (error) {
        console.error('加载评论失败:', error)
      }
    }

    // 检查点赞状态
    const checkLikeStatus = async () => {
      try {
        console.log(`检查点赞状态，页面ID: ${pageId}`)
        const status = await interactionStore.checkLikeStatus(pageId, token.value)
        console.log('点赞状态:', status)
        likeStatus.value = status || { liked: false, count: 0 }
      } catch (error) {
        console.error('检查点赞状态失败:', error)
        likeStatus.value = { liked: false, count: 0 }
      }
    }

    // 加载分享数
    const loadSharesCount = async () => {
      try {
        console.log(`加载分享数，页面ID: ${pageId}`)
        const count = await interactionStore.getSharesCount(pageId)
        console.log('获取到的分享数:', count)
        sharesCount.value = count || 0
      } catch (error) {
        console.error('加载分享数失败:', error)
        sharesCount.value = 0
      }
    }

    // 处理点赞
    const handleLike = async () => {
      if (!isLoggedIn.value) {
        router.push({ name: 'login', query: { redirect: router.currentRoute.value.fullPath } })
        return
      }

      try {
        console.log(`发送点赞请求，页面ID: ${pageId}`)
        const status = await interactionStore.toggleLike(pageId, token.value)
        console.log('点赞响应:', status)
        if (status) {
          likeStatus.value = status
        }
      } catch (error) {
        console.error('点赞操作失败:', error)
      }
    }

    // 处理分享
    const handleShare = async () => {
      if (!isLoggedIn.value) {
        router.push({ name: 'login', query: { redirect: router.currentRoute.value.fullPath } })
        return
      }

      try {
        // 复制链接到剪贴板
        const url = window.location.href
        await navigator.clipboard.writeText(url)
        console.log('链接已复制到剪贴板:', url)

        // 记录分享
        console.log(`发送分享请求，页面ID: ${pageId}`)
        const count = await interactionStore.sharePage(pageId, token.value)
        console.log('分享响应:', count)
        if (count !== null) {
          sharesCount.value = count
        }

        alert('链接已复制到剪贴板，可以分享给朋友了')
      } catch (error) {
        console.error('分享失败:', error)
        alert('分享失败，请手动复制链接')
      }
    }

    // 提交评论
    const submitComment = async () => {
      if (!isLoggedIn.value) {
        router.push({ name: 'login', query: { redirect: router.currentRoute.value.fullPath } })
        return
      }

      if (!commentContent.value.trim()) return

      commentLoading.value = true
      try {
        console.log(`发送评论请求，页面ID: ${pageId}，评论内容: ${commentContent.value}`)
        const result = await interactionStore.addComment(pageId, commentContent.value, token.value)
        console.log('评论响应:', result)

        // 清空评论内容
        commentContent.value = ''

        // 重新加载评论
        await loadComments()
      } catch (error) {
        console.error('提交评论失败:', error)
      } finally {
        commentLoading.value = false
      }
    }

    // 提交反馈
    const submitFeedback = async () => {
      if (!feedbackForm.value.name || !feedbackForm.value.email || !feedbackForm.value.message) {
        alert('请填写完整的反馈信息')
        return
      }

      feedbackLoading.value = true
      try {
        // 这里可以添加发送反馈到后端的代码
        console.log('提交反馈:', feedbackForm.value)

        // 模拟提交成功
        setTimeout(() => {
          alert('感谢您的反馈，我们会尽快回复！')
          feedbackForm.value = {
            name: '',
            email: '',
            message: '',
          }
          feedbackLoading.value = false
        }, 1000)
      } catch (error) {
        console.error('提交反馈失败:', error)
        alert('提交失败，请稍后再试')
        feedbackLoading.value = false
      }
    }

    // 加载所有数据
    const loadAllData = async () => {
      console.log(`正在加载页面ID: ${pageId} 的所有数据`)
      // 先重置当前页面的状态，确保数据是最新的
      interactionStore.resetPageState(pageId)
      await Promise.all([loadComments(), checkLikeStatus(), loadSharesCount()])
    }

    // 组件挂载时加载数据
    onMounted(async () => {
      await loadAllData()
    })

    return {
      teamMembers,
      feedbackForm,
      feedbackLoading,
      submitFeedback,
      isLoggedIn,
      userStore, // 添加 userStore，使其在模板中可用
      comments,
      likeStatus,
      sharesCount,
      commentContent,
      commentLoading,
      handleLike,
      handleShare,
      submitComment,
      formatDate,
    }
  },
}
</script>

<style scoped>
.about {
  padding: 40px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 2.2rem;
  color: var(--primary-color);
  margin-bottom: 15px;
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.page-header p {
  color: #666;
  max-width: 800px;
  margin: 0 auto;
}

.about-content {
  margin-bottom: 50px;
}

.about-section {
  margin-bottom: 50px;
}

.about-section h2 {
  font-size: 1.8rem;
  color: var(--dark-color);
  margin-bottom: 25px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary-color);
  display: inline-block;
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.section-content {
  line-height: 1.8;
}

.section-content p {
  margin-bottom: 20px;
  color: #444;
}

/* 使命部分样式 */
.mission-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.mission-item {
  display: flex;
  gap: 20px;
  padding: 25px;
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}

.mission-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}

.mission-icon {
  font-size: 2.5rem;
  display: flex;
  align-items: flex-start;
  min-width: 40px;
}

.mission-text h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--dark-color);
}

.mission-text p {
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* 团队部分样式 */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.team-member {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 20px;
  text-align: center;
  transition: var(--transition);
}

.team-member:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}

.member-avatar {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto 15px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-source {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 0.6rem;
  padding: 2px 0;
  text-align: center;
}

.team-member h3 {
  font-size: 1.3rem;
  margin-bottom: 5px;
  color: var(--dark-color);
}

.member-title {
  color: var(--primary-color);
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.member-desc {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0;
}

/* 联系我们部分样式 */
.contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.contact-item {
  display: flex;
  gap: 15px;
  padding: 20px;
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.contact-icon {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
}

.contact-text h3 {
  font-size: 1.1rem;
  margin-bottom: 5px;
  color: var(--dark-color);
}

.contact-text p {
  margin-bottom: 0;
  color: #666;
}

/* 留言表单样式 */
.contact-message {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 30px;
}

.contact-message h3 {
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: var(--dark-color);
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: bold;
  color: #555;
}

.form-group input,
.form-group textarea {
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(197, 48, 48, 0.1);
}

.btn-submit {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 12px;
  border-radius: var(--border-radius);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 10px;
}

.btn-submit:hover {
  background-color: #b42c2c;
}

/* 互动交流部分样式 */
.interaction-section {
  background-color: rgba(255, 248, 220, 0.5);
  padding: 30px;
  border-radius: var(--border-radius);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-top: 60px;
}

.interaction-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  gap: 30px;
}

.interaction-intro {
  flex: 2;
}

.interaction-intro p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.login-tip {
  font-size: 0.95rem;
  color: #666;
  padding: 10px;
  background-color: rgba(184, 134, 11, 0.1);
  border-radius: var(--border-radius);
  display: inline-block;
}

.login-link {
  color: var(--primary-color);
  font-weight: bold;
  text-decoration: none;
  transition: var(--transition);
}

.login-link:hover {
  text-decoration: underline;
}

.interaction-stats {
  flex: 1;
  display: flex;
  gap: 15px;
  background-color: white;
  padding: 15px;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 10px;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.stat-item:hover {
  background-color: rgba(184, 134, 11, 0.05);
}

.stat-icon {
  font-size: 1.8rem;
  margin-bottom: 5px;
}

.stat-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-count {
  font-weight: bold;
  font-size: 1.2rem;
  color: var(--dark-color);
}

.stat-label {
  font-size: 0.8rem;
  color: #666;
}

.interaction-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.interaction-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  background-color: white;
  cursor: pointer;
  transition: var(--transition);
  font-size: 1rem;
}

.interaction-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.interaction-btn:not(:disabled):hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

.like-btn.active {
  background-color: rgba(184, 134, 11, 0.1);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.icon {
  font-size: 1.2rem;
}

.count {
  font-size: 0.9rem;
  color: #666;
  margin-left: 5px;
  min-width: 20px;
  text-align: center;
}

/* 评论区域样式 */
.comments-section {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 25px;
}

.comments-section h3 {
  font-size: 1.3rem;
  margin-bottom: 20px;
  color: var(--dark-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-count {
  background-color: var(--primary-color);
  color: white;
  font-size: 0.9rem;
  padding: 2px 8px;
  border-radius: 12px;
}

.comment-form {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  align-items: flex-start;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
}

.comment-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.comment-form textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  resize: vertical;
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 15px;
  transition: var(--transition);
}

.comment-form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.1);
}

.submit-comment-btn {
  align-self: flex-end;
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.95rem;
}

.submit-comment-btn:hover:not(:disabled) {
  background-color: var(--accent-color);
  transform: translateY(-2px);
}

.submit-comment-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.comments-list {
  margin-top: 20px;
}

.comment-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  display: flex;
  gap: 15px;
  position: relative;
}

.comment-content {
  flex: 1;
  background-color: #f9f9f9;
  border-radius: var(--border-radius);
  padding: 15px;
  position: relative;
}

.comment-content::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 15px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #f9f9f9;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.comment-author {
  color: var(--dark-color);
}

.comment-time {
  font-size: 0.85rem;
  color: #888;
}

.comment-body {
  line-height: 1.6;
  color: #333;
  margin-bottom: 10px;
}

.comment-actions {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: #666;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 5px;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.action-btn:hover:not(:disabled) {
  color: var(--primary-color);
  background-color: rgba(184, 134, 11, 0.05);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-icon {
  font-size: 1rem;
}

.action-count,
.action-label {
  font-size: 0.85rem;
}

.no-comments {
  text-align: center;
  padding: 40px 20px;
  color: #888;
  background-color: #f9f9f9;
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.no-comments-icon {
  font-size: 2.5rem;
  color: #ccc;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .interaction-header {
    flex-direction: column;
  }

  .interaction-stats {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .mission-item {
    flex-direction: column;
  }

  .mission-icon {
    margin-bottom: 10px;
  }

  .contact-item {
    flex-direction: column;
  }

  .contact-icon {
    margin-bottom: 10px;
  }

  .interaction-section {
    padding: 20px 15px;
  }

  .interaction-stats {
    padding: 10px;
  }

  .stat-item {
    padding: 5px;
  }

  .comment-form {
    flex-direction: column;
  }

  .comment-avatar {
    margin-bottom: 10px;
  }

  .submit-comment-btn {
    align-self: stretch;
  }
}
</style>
